{% extends "html/base.html" %}

{% block style %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/login.css" />
{% endblock style %}

{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{{STATIC_URL}}js/login.js" ></script>
{% endblock script%}


{% block body %}
{{ block.super }}
{% if notifyFail %}
    <div style="display: none" id='notifyFail' title="Important Message">
        <p>{{ notifyFail }}</p>
    </div>
{% endif %}
    <div id="loginOuter">
        <ul>
            <li><a href="#loginForm">Login</a></li>{% comment %}creates login tab{% endcomment %}
            <li><a href="#createUser">Register New User</a></li>
        </ul>
        <div id="loginForm">
            <form name="login" method="post" action="{% url travel_game.views.login %}">
				<p> 
					<span>Username: </span> </span>
					<input type="text" name="username" id="username"/>
				</p>
				<p>
				    <span>Password: </span> 
				    <input type="password" name="pwd" id="password"/>
				</p>
				<input type="hidden" name="next" value="{{ next }}"/> {% csrf_token %}
				<input type="submit" class='button' value="Login"/>
            </form>
        </div>
        <div id="createUser">
            <div>You are welcome to put a fake email</div>
            <form name="create" id='createUser' method="post"  onsubmit="return validateForm();" url="{% url travel_game.views.validateUsername %}" action="{% url travel_game.views.createUser %}">
		       {{ userCreationForm.as_p }} {% csrf_token %} 		     
		       <input type="submit" class='button' value="Create new user"/>
		    </form>
		</div>
    </div>    
{% endblock body %}
